<template>
	<view class="container">
		<uni-forms ref="form" :modelValue="formData">
			<uni-forms-item label="用户名" class="tagCode">
				<uni-easyinput type="text" class="uni-input" v-model="formData.username" placeholder="输入用户名" />
			</uni-forms-item>
			<uni-forms-item label="密码" class="tagName">
				<uni-easyinput type="password" class="uni-input" v-model="formData.password" placeholder="输入密码" />
			</uni-forms-item>
			<uni-forms-item label="验证码" class="tagName">
				<uni-easyinput type="text" class="uni-input" v-model="formData.recaptcha" placeholder="输入图片验证码" />
			</uni-forms-item>
			<view style="display: flex;flex-direction: row;display: space-between;">
				<button @click="getCaptcha" size="mini" style="" type="text">重新获取验证码</button>
			</view>
		</uni-forms>
		<button @click="toMain()" size="small" style="width: 100%;border-radius: 50px;" type="primary">登录</button>
	</view>
<!-- 	<view class="abslrtb flex-column a-center wrap">
		<view class="form">
			<view class="flex a-center form-item">
				<view class="label">
					<text>账号</text>
				</view>
				<image class="label_icon" src="/static/images/icon_user.png" mode=""></image>
				<view class="label_fgs"></view>
				<view class="flex-1">
					<input placeholder-class="placeholder" class="qui-input" type="text" value="" placeholder="请输入账号" />
				</view>
			</view>
			<view class="flex a-center form-item">
				<view class="label">
					<text>密码</text>
				</view>
				<image class="label_icon" src="/static/images/icon_pw.png" mode=""></image>
				<view class="label_fgs"></view>
				<view class="flex-1">
					<input placeholder-class="placeholder" :password="password" class="qui-input" type="text" value="" placeholder="请输入密码" />
				</view>
			</view>
			<view class="flex a-center form-item">
				<view class="label">
					<text>验证码</text>
				</view>
				<image class="label_icon" src="/static/images/icon_pw.png" mode=""></image>
				<view class="label_fgs"></view>
				<view class="flex-1">
					<input placeholder-class="placeholder" :password="password" class="qui-input" type="text" value="" placeholder="请输入验证码" />
					<view class="qbtn">
						<text class="btn-text-color fs30" @click="toMain()">登录</text>
					</view>
				</view>
			</view>
		</view>
		<view class="btns">
			<view class="qbtn">
				<text class="btn-text-color fs30" @click="toMain()">登录</text>
			</view>
		</view> -->
		
	</view>
</template>

<script>
	import request from "@/common/request.js";
	export default {
		data() {
			return {
				/* 登录表单 */
				formData:{
					username:'',
					password: '',
					code:'',
				},
				captcha:{
					img:'',
					uuid:'',
				}
			}
		},
		methods: {
			/* 获取图片验证码 */
			getCaptcha(){
				request.httpRequest("/business/captchaimage").then(res => {
					if (res.code == 200) {
						console.log(res);
						this.captcha.img = res.img
						this.captcha.uuid = res.uuid
						this.formData.uuid = res.uuid
					} else {
						console.log("请求失败");
					}
				});
			},
			/* 暂替登录函数 */
			toMain(){
				uni.switchTab({
					url:'../functions/tool_bar/me/index'
				})
			},
			/* 登录操作 */
			goLogin() {
				let opts = {
					url : '/business/login',
					method : 'post'
				}
				let payload = {
					userName:this.formData.username,
					password:this.formData.password,
					code:this.formData.code,
					uuid:this.captcha.uuid,
				}
				request.httpRequest(opts,payload).then(res => {
					if (res.code == 200) {
						console.log("登录成功");
						/* 存储token */
						let token = res.data.token
						uni.setStorageSync(token)
						uni.switchTab({
							url:'../functions/tool_bar/me/index'
						})
					} else {
						console.log("登录失败");
					}
				});
			},
			goRegister() {
				uni.navigateTo({
					url: '/pages/auth/register/register'
				})
			},
			goForget() {
				uni.navigateTo({
					url: '/pages/auth/forget/forget'
				})
			}
		}
	}
</script>

<style>
/* 	@import "style.scss" */
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}

	.tagCode {
		margin: auto;
	}
</style>
